<template>
  <div>
    <h2>基础类型</h2>
    <i class="">
      上为普通TS语法 ，下方vue3 + ts语法
    </i>
    <h3>number 类型</h3>
    <div class="codebgc">
      <p>TS : {{"const num0: number = 456"}} --- {{num0}} </p>
      <p>Vue3 + TS: {{"const num1 = ref<number>(123)"}} --- {{num1}} </p>
    </div>

    <h3>boolean 类型</h3>
    <div class="codebgc">
      <p>{{"const boo0: boolean = true"}} --- {{boo0}} </p>
      <p>{{"const boo1 = ref<boolean>(false)"}} --- {{boo1}} </p>
    </div>

    <h3>string 类型</h3>
    <div class="codebgc">
      <p>{{" const str0: string = 'abc'"}} --- {{str0}} </p>
      <p>{{"const str1 = ref<string>('abc')"}} --- {{str1}} </p>
    </div>

    <h3>array 类型</h3>
    <div class="codebgc">
      <p>数字数组： {{"const arrNum0: number[] = [1, 2, 3]"}} --- {{arrNum0}}</p>
      <p>数字数组： {{"const arrNum1: Array<number> = [4, 5, 6]"}} --- {{arrNum1}}</p>
      <p>字符串数组： {{"const arr0: string[] = ['a', 'b', 'c']"}} --- {{arrStr}}</p>
      <p>---</p>
      <p>{{"const arrVueTs: number[] = reactive([1, 2, 3])"}} --- {{arrVueTs}} </p>
    </div>

    <h3>Enum 类型</h3>
    <div class="codebgc">
      <p>枚举： {{`enum Direction {
      NORTH,
      SOUTH,
      EAST,
      WEST,
    }`}}</p>
      <p>.值： {{"let dir0: Direction = Direction.NORTH"}} --- {{dir0}}</p>
      <p>索引： {{"let dir1: Direction = Direction['3']"}} --- {{dir1}}</p>
      <p>定义初始值：{{"enum Direction {  NORTH = 3,  SOUTH,  EAST,  WEST,}"}}</p>
    </div>

    <h3>any 类型</h3>
    <p>在 TypeScript 中，任何类型都可以被归为 any 类型。这让 any 类型成为了类型系统的顶级类型（也被称作全局超级类型）。</p>
    <div class="codebgc">
      <p>{{"let any0: any = 666; any0 = 'abc'; any0 = false"}} --- {{any0}} </p>
    </div>

    <h3>Unknown 类型</h3>
    <p>就像所有类型都可以赋值给 any，所有类型也都可以赋值给 unknown。这使得 unknown 成为 TypeScrppt 类型系统的另一种顶级类型（另一种是 any）。</p>
    <div class="codebgc">
      <p>{{"let value = unknow; value = 'Hello World'"}} --- {{value}}</p>
      <pre>{{unknowValue}}</pre>
    </div>
    <p>unknown 类型只能被赋值给 any 类型和 unknown 类型本身</p>

    <h3>Tuple(元组) 类型</h3>
    <p>元组可用于定义具有有限数量的未命名属性的类型。每个属性都有一个关联的类型。使用元组时，必须提供每个属性的值。</p>
    <div class="codebgc">
      <p>{{元组}} --- {{tupleType}} </p>
    </div>

    <h3>Void（空） 类型</h3>
    <p>某种程度上来说，void 类型像是与 any 类型相反，它表示没有任何类型。</p>
    <div class="codebgc">
     <pre>{{voidType}}</pre>
    </div>

    <h3>Null 和 Undefined 类型</h3>
    <p>TypeScript 里，undefined 和 null 两者有各自的类型分别为 undefined 和 null。</p>
    <div class="codebgc">
     <p>{{"let u: undefined = undefined; let n: null = null;"}}</p>
    </div>

    <h3>Never 类型</h3>
    <p>never 类型表示的是那些永不存在的值的类型。 例如，never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。使用 never 避免出现新增了联合类型没有对应的实现，目的就是写出类型绝对安全的代码。</p>
    <div class="codebgc">
     <pre>{{neverType}}</pre>
    </div>

  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import tsMarkDown from '../tsMarkDown.vue'
export default defineComponent({
  name: 'App',
  components: {
    tsMarkDown,
  },
  setup(props) {
    // ts
    const num0: number = 456
    // vue3+ts
    const num1 = ref<number>(123)
    const boo0: boolean = true
    const boo1 = ref<boolean>(false)
    const str0: string = 'abc'
    const str1 = ref<string>('abc')
    const arrNum0: number[] = [1, 2, 3]
    const arrNum1: Array<number> = [4, 5, 6]
    const arrStr: string[] = ['a', 'b', 'c']
    const arrVueTs: number[] = reactive([1, 2, 3])
    enum Direction {
      NORTH = 3,
      SOUTH,
      EAST,
      WEST,
    }
    let dir0: Direction = Direction.NORTH
    let dir1: Direction = Direction['3']
    let any0: any = 666
    any0 = 'abc'
    any0 = false
    let value: unknown
    value = true // OK
    value = 42 // OK
    value = 'Hello World' // OK
    let unknowValue = `
    let value: unknown
        value = true // OK
        value = 42 // OK
        value = 'Hello World' // OK
        value = [] // OK
        value = {} // OK
        value = Math.random // OK
        value = null // OK
        value = undefined // OK
        value = new TypeError() // OK
        value = Symbol('type') // OK

    let value1:boolean = value // Error`

    let 元组 = `let tupleType: [string, boolean]; tupleType = ["Semlinker", true];`
    let tupleType: [string, boolean]
    tupleType = ['Semlinker', true]
    // 声明函数返回值为void
    function warnUser(): void {
      console.log('This is my warning message')
    }
    let voidType = `
    function warnUser(): void {
      console.log('This is my warning message')
    }
    `
    let neverType = `      // 返回never的函数必须存在无法达到的终点

      function error(message: string): never {
        throw new Error(message);
      }

      function infiniteLoop(): never {
        while (true) {}
      }
    `
    return {
      num0,
      num1,
      boo0,
      boo1,
      str0,
      str1,
      arrNum0,
      arrNum1,
      arrStr,
      arrVueTs,
      dir0,
      dir1,
      any0,
      value,
      unknowValue,
      元组,
      tupleType,
      warnUser,
      voidType,
      neverType,
    }
  },
})
</script>

<style lang="scss" scoped>
@import '@/global.scss';
.codebgc {
  @extend .codebgc;
}
</style>